<template>
  <view>
    <view class="c-flex btnBox" v-if="list.length > 0">
      <u-checkbox active-color="#F3651F" shape="circle" @change="checkboxChange" v-model="radioValue" :name="1"
        >全选</u-checkbox
      >
      <u-button
        type="primary"
        size="mini"
        @click="delMoreGoods"
        :custom-style="{backgroundColor: '#F36823', marginRight: '30rpx'}"
        >删除</u-button
      >
    </view>
    <view class="c-mb520 c-mt30">
      <view v-if="list.length > 0">
        <u-checkbox-group @change="checkboxGroupChange">
          <u-swipe-action
            :show="item.show"
            :index="index"
            v-for="(item, index) in list"
            :key="item.id"
            @click="click"
            @open="open"
            :options="options"
            class="c-mt20"
          >
            <view class="item">
              <view class="c-flex c-width-100">
                <view>
                  <u-checkbox active-color="#F3651F" shape="circle" v-model="item.checked" :name="item.id"></u-checkbox>
                </view>
                <view class="c-flex-3"
                  ><image class="img" mode="aspectFill" :src="item.product.pic" @click="navTo(item.productId)"
                /></view>
                <view class="c-flex-7 c-width-100">
                  <view class="title-wrap c-flex c-flex-column c-flex-between">
                    <view class="title u-line-2 c-fw600 c-color-000">{{ item.product.name }}</view>
                    <view>
                      <text class="c-color-ccc type c-mt20">{{ item.sku.name }}</text>
                    </view>
                    <view class="color-main c-mt10 c-flex">
                      <view class="c-flex-1"> ￥{{ item.sku.price }} </view>
                      <view class="c-flex-1 c-text-right">
                        <number
                          :num-color="'#F3651F'"
                          :min="1"
                          :val="item.number"
                          btnType="circle"
                          @change="
                            val => {
                              valChange(val, item.id, item)
                            }
                          "
                        ></number>
                      </view>
                    </view> </view
                ></view>
                <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
              </view>
            </view>
          </u-swipe-action>
        </u-checkbox-group>
      </view>
      <view class="c-mt100" v-else>
        <u-empty text="购物车还没有商品哦" mode="list"></u-empty>
      </view>
    </view>
    <view v-if="list.length > 0" class="c-fixed c-bg-white c-bottom-0 c-width-90 c-p15">
      <view class="c-flex c-mt20">
        <view class="c-flex-1 c-fw600 c-color-000">金额</view>
        <view class="c-flex-1 c-text-right">￥ {{ price }}</view>
      </view>
      <!-- <view class="c-flex c-mt20">
        <view class="c-flex-1 c-fw600 c-color-000">优惠金额</view>
        <view class="c-flex-1 c-text-right color-main">-￥ {{ price }}</view>
      </view> -->
      <view class="c-flex c-mt20">
        <view class="c-flex-1 c-fw600 c-color-000">总价格</view>
        <view class="c-flex-1 c-text-right c-color-000">￥ {{ price }}</view>
      </view>
      <save-btn :text="'提交订单'" @navTo="commit" :marginTop="20"></save-btn>
    </view>
  </view>
</template>

<script>
  import number from '../../commponents/public/numberAdd'
  import saveBtn from './../../commponents/public/button/SaveButton'
  import shoppingCar from '@/services/shoppingCar'
  import url from '../../common/util/url'
  import util from '@/common/util/index.js'
  export default {
    data() {
      return {
        list: [],
        checkList: [],
        disabled: false,
        btnWidth: 180,
        show: false,
        activeArr: [],
        options: [
          {
            text: '删除',
            style: {
              backgroundColor: '#F3651F'
            }
          }
        ],
        radioValue: false,
        value: 1,
        price: 0,
        page: 1,
        limit: 10
      }
    },
    components: {
      number,
      saveBtn
    },
    onShow() {
      this.getList()
      this.radioValue = false
      this.price = 0
      this.activeArr = []
    },

    methods: {
      // 获取数据
      getList() {
        shoppingCar
          .list({
            userId: uni.getStorageSync('userId'),
            page: this.page,
            limit: this.limit
          })
          .then(data => {
            this.list = data.list.map(i => {
              i.checked = false
              return i
            })
            this.totalPrice()
          })
      },
      checkboxChange(d) {
        if (d.value) {
          this.list = this.list.map(i => {
            i.checked = true
            return i
          })
          this.checkboxGroupChange(this.list.map(i => i.id))
        } else {
          this.list = this.list.map(i => {
            i.checked = false
            return i
          })
          this.checkboxGroupChange([])
        }
      },
      // 删除商品
      delMoreGoods() {
        if (this.activeArr.length <= 0) {
          wx.showToast({
            title: '请选择商品',
            icon: 'none',
            duration: 2000
          })
        } else {
          shoppingCar.del(this.activeArr.map(i => i.id)).then(data => {
            wx.showToast({
              title: '删除成功',
              duration: 2000
            })
            this.activeArr = []
            this.getList()
            this.totalPrice()
          })
        }
      },
      checkboxGroupChange(a) {
        if (a.length == this.list.length) {
          this.radioValue = true
        } else {
          this.radioValue = false
        }
        this.activeArr = []
        a.forEach(item => {
          let boo = this.list.find(i => i.id == item)
          if (boo) this.activeArr.push(boo)
        })
        this.totalPrice()
      },
      navTo(id) {
        wx.navigateTo({
          url: '/pages/productDetails/index?id=' + id
        })
      },
      commit() {
        if (this.activeArr.length <= 0) {
          wx.showToast({
            title: '请选择商品',
            icon: 'none',
            duration: 2000
          })
        } else {
          let arr = []
          let shoppingCarIds = []
          for (let i = 0; i < this.activeArr.length; i++) {
            arr.push({
              skuId: this.activeArr[i].skuId,
              count: this.activeArr[i].number,
              id: this.activeArr[i].productId
            })
            shoppingCarIds.push(this.activeArr[i].id)
          }
          uni.setStorageSync('order', arr)
          uni.setStorageSync('orderFrom', url.getCurrentPageUrl())
          uni.setStorageSync('shoppingCarIds', shoppingCarIds)
          wx.navigateTo({
            url: `/pages/confirmOrder/index`
          })
        }
      },
      totalPrice() {
        this.price = 0
        this.activeArr.forEach(item => {
          let cheng = util.floatMul(item.sku.price, item.number)
          this.price = util.floatAdd(cheng, this.price)
        })
      },
      click(index, index1) {
        if (index1 === 0) {
          shoppingCar.del([this.list[index].id]).then(data => {
            wx.showToast({
              title: '删除成功',
              duration: 2000
            })
            this.getList()
          })
        }
      },
      valChange(val, id, item) {
        this.activeArr.forEach((item, index) => {
          if (item.id === id) {
            this.activeArr[index].number = val
          }
        })
        this.totalPrice()
        shoppingCar
          .update({
            ...item,
            number: val
          })
          .then(data => {})
      },
      // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
      open(index) {
        // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
        // 原本为'false'，再次设置为'false'会无效
        this.list[index].show = true
        this.list.map((val, idx) => {
          if (index !== idx) this.list[idx].show = false
          return false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
    padding: 20rpx;
  }
  u-checkbox /deep/ {
    .u-checkbox__icon-wrap {
      width: 22px !important;
      height: 22px !important;
    }
  }
  .title-wrap {
    height: 100%;
  }
  .c-width-90 {
    box-sizing: border-box;
    width: 100%;
  }
  .btnBox {
    justify-content: flex-end;
    height: 66rpx;
    align-items: flex-end;
  }
  .c-mb520 {
    padding-bottom: 600rpx;
  }
  image {
    width: 190rpx;
    flex: 0 0 120rpx;
    height: 190rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
  }

  .title {
    color: #000;
    font-size: 32rpx;
    text-align: left;
    font-weight: 500;
  }
  .type {
    font-size: 24rpx;
    color: #6c6c6c;
    background-color: #f3f3f3;
    padding: 5px 10px;
    border-radius: 80px;
  }
  .color-main {
    font-size: 28rpx;
    color: #ff6a21;
  }
  .c-mt100 {
    margin-top: 100px;
  }
</style>
<style scoped>
  u-checkbox >>> .u-icon__icon {
    top: -4px !important;
  }
</style>
